<template>
    <h1>Vue的基本信息</h1>
    <p>{{ name }}</p>
    <p>{{ num }}</p>
    <p>{{ arr }}</p>
    <p>props</p>
    
    <p>num2:{{ num2 }}</p>
    <button @click="addOne">num + 1</button>
</template>

<script>
export default{
    data(){
        return{
            name:'SB',
            num:1,
            arr:[1,2,3]
        }
    },
    computed:{
        num2(){
            return this.num - 1
        }
    },
    watch:{
        num:(newVal,oldVal)=>{
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        },
        num2:(newVal,oldVal)=>{
            console.log('computed newVal',newVal);
            console.log('computed oldVal',oldVal);
        }
    },
    methods:{
        addOne(){
            this.num = this.num +1
        }
    }
}
</script>